<template>
  <n-space
    vertical
    v-if="modelValue.multiple"
  >
    <n-switch v-model:value="modelValue.toEdit"><template #unchecked>重新选择</template></n-switch>
    <!--      <n-space><n-switch v-model:value="showPath" />Show Path</n-space>-->
    <!--      <n-space><n-switch v-model:value="cascade" />Cascade </n-space>-->
    <n-space>
      <!--      {{modelValue.chooseTaskResults}}-->
      领域阶段选择:<n-tree-select
        v-model:value="modelValue.chooseTaskResults"
        :disabled="!modelValue.toEdit"
        :consistent-menu-width="false"
        class="mySelect"
        multiple
        checkable
        :options="chooseTaskOptions"
        :cascade="modelValue.cascade"
        check-strategy="parent"
        :show-path="showPath"
        :max-tag-count="1"
        :allow-checking-not-loaded="modelValue.cascade"
        :on-load="handleTaskLoad"
        filterable
        style="width: 200px"
      />
      生活模式选择：<n-tree-select
        v-model:value="modelValue.chooseLifeResults"
        :disabled="!modelValue.toEdit"
        :consistent-menu-width="false"
        class="mySelect"
        :max-tag-count="1"
        multiple
        checkable
        :options="chooseLifeOptions"
        :cascade="modelValue.cascade"
        check-strategy="parent"
        :show-path="showPath"
        :allow-checking-not-loaded="modelValue.cascade"
        :on-load="handleLifeLoad"
        filterable
        style="width: 200px"
      />
      <n-button
        type="primary"
        size="tiny"
        dashed
        :disabled="!modelValue.toEdit"
        @click="clear()"
      >
        清空
      </n-button>
    </n-space>
  </n-space>
  <template v-if="!modelValue.multiple">
    <n-tree-select
      v-show="modelValue.type === 1"
      v-model:value="modelValue.chooseTaskResults"
      :disabled="!modelValue.toEdit"
      :consistent-menu-width="false"
      class="mySelect"
      checkable
      :options="chooseTaskOptions"
      :cascade="true"
      check-strategy="parent"
      :show-path="showPath"
      :max-tag-count="1"
      :allow-checking-not-loaded="cascade"
      :on-load="handleTaskLoad"
      filterable
      style="width: 200px"
    />
    <n-tree-select
      v-show="modelValue.type === 2"
      v-model:value="modelValue.chooseLifeResults"
      :disabled="!modelValue.toEdit"
      :consistent-menu-width="false"
      class="mySelect"
      :max-tag-count="1"
      multiple
      checkable
      :options="chooseLifeOptions"
      :cascade="true"
      check-strategy="parent"
      :show-path="showPath"
      :allow-checking-not-loaded="cascade"
      :on-load="handleLifeLoad"
      filterable
      style="width: 200px"
    />
  </template>
</template>

<script
  lang="ts"
  setup
  generic="T extends object &
{chooseTaskResults: Array<number>; chooseLifeResults: Array<number>; hasFinish:boolean;
  toEdit:boolean; multiple:boolean; type:number,cascade:boolean}"
>
import { StageList } from "@model/stage";
import { TimeManageList } from "@model/timeManage";
import UseCacheTaskLog from "@pinias/UseCacheTaskLog";
import UseFieldTree from "@pinias/UseFieldTree";
import UseLifeModel from "@pinias/UseLifeModel";
import UseStage from "@pinias/UseStage";
import UseTask from "@pinias/UseTask";
import UseTimeManageList from "@pinias/UseTimeManageList";
import pinia from "@pinias/pinia";
import { TreeSelectOption } from "naive-ui";
import { computed, ref } from "vue";

// 全局数据
const { getCacheTaskLogMap } = UseCacheTaskLog(pinia);
const cacheTaskLogMap = getCacheTaskLogMap();
const { getStageList } = UseStage(pinia);
const stageList: StageList = getStageList();
const { getFieldTree } = UseFieldTree(pinia);
const fieldTree = getFieldTree();
const { getTaskList } = UseTask(pinia);
const taskList = getTaskList();
const { getLifeModel } = UseLifeModel(pinia);
const lifeModel = getLifeModel();
const { getTimeManageList } = UseTimeManageList(pinia);
const timeManageList: TimeManageList = getTimeManageList();

// 父组件数据
const props = defineProps<{ modelValue: T }>();
const emit = defineEmits(["update:modelValue"]);
const modelValue = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val),
});
const cascade = ref(true);
const showPath = ref(false);
// 任务选择
const chooseTaskOptions = ref(
  fieldTree.getFieldSelectOptions().map(item => {
    return {
      label: item.label,
      key: item.value,
      depth: 1,
      isLeaf: false,
    };
  }),
);
const handleTaskLoad = async (option: TreeSelectOption) => {
  option.children = await getTaskChildren(option);
  return new Promise<void>(resolve => {
    resolve();
  });
};
async function getTaskChildren(option: TreeSelectOption) {
  if (option.key !== undefined) {
    if (option.depth === 1) {
      // 找stage
      const fieldId = parseInt(option.key.valueOf().toString());
      return (
        await cacheTaskLogMap.getStageSelectOptions2(
          fieldTree.getFieldDataById(fieldId),
          modelValue.value.hasFinish,
          stageList,
        )
      ).map(item => {
        return {
          label: item.label,
          key: item.value,
          depth: 2,
          isLeaf: false,
        };
      });
    }
    if (option.depth === 2) {
      // 找task
      const stageId = parseInt(option.key.valueOf().toString());
      return (
        await cacheTaskLogMap.getTaskSelectOptions2(
          stageList.getStageDataById(stageId),
          modelValue.value.hasFinish,
          taskList,
        )
      ).map(item => {
        return {
          label: item.label,
          key: item.value,
          depth: 3,
          isLeaf: true,
        };
      });
    }
    return [];
  }
}

// 生活模式选择
const chooseLifeOptions = ref(
  lifeModel.getLifeModelSelectOptions().map(item => {
    return {
      label: item.label,
      key: item.value,
      depth: 1,
      isLeaf: false,
    };
  }),
);
const handleLifeLoad = (option: TreeSelectOption) => {
  return new Promise<void>(resolve => {
    option.children = getLifeChildren(option);
    resolve();
  });
};
function getLifeChildren(option: TreeSelectOption) {
  if (option.key !== undefined) {
    const lifeModelId = parseInt(option.key.valueOf().toString());
    const lifeModelData = lifeModel.getLifeModelDataById(lifeModelId);
    if (lifeModelData !== undefined) {
      const timeManages = lifeModelData.timeManageList;
      return timeManageList.getTimeManageSelectOptions2(timeManages).map(item => {
        return {
          label: item.label,
          key: item.value,
          depth: 2,
          isLeaf: false,
        };
      });
    }
  }
  return [];
}

const clear = async () => {
  modelValue.value.chooseLifeResults = [];
  modelValue.value.chooseTaskResults = [];
};
</script>
<style scoped></style>
